<template>
	<view class="content">
		<view class='header'>
			<view class='person'>
				<!-- 基本资料 -->
				<view class="info">
					<view class="avatar">
						<!-- #ifdef H5 || APP-PLUS -->
						<image v-if="person.avatar_text" :src="person.avatar_text"></image>
						<image v-else src="/static/logo.png"></image>
						<!-- #endif -->
			
						<!-- #ifdef MP-WEIXIN -->
						<image v-if="person.avatar_text" :src="person.avatar_text"></image>
						<open-data v-else type="userAvatarUrl"></open-data>	
						<!-- #endif -->
					</view>

					<view class="base">
						<view class="nickname">{{ person.nickname }}</view>
						<view class="desc" v-if="person.intro">{{ person.intro }}</view>
						<view class="desc" v-else>这家伙很懒，什么也没写！</view>
					</view>
				</view>

				<!-- 宫格布局 -->
				<view class="grid">
					<u-grid :border="true">
						<u-grid-item>
							<u--text color="#fff" text="提问" align="center"></u--text>
							<u--text color="#fff" :text="ask.length" align="center"></u--text>
						</u-grid-item>
						<u-grid-item>
							<u--text color="#fff" text="回答" align="center"></u--text>
							<u--text color="#fff" :text="answer.length" align="center"></u--text>
						</u-grid-item>
						<u-grid-item>
							<u--text color="#fff" text="收藏" align="center"></u--text>
							<u--text color="#fff" :text="collect.length" align="center"></u--text>
						</u-grid-item>
					</u-grid>
				</view>

				<!-- 按钮 -->
				<view class="btnlist" v-if="busid && busid != business.id">
					<view class="btn">
						<u-button type="success" icon="man-add" text="取消关注" @click="concern" v-if="business.concern_list.includes(busid.toString())"></u-button>
						<u-button type="success" icon="man-add" text="关注" @click="concern" v-else></u-button>
					</view>
					<view class="btn">
						<u-button type="warning" icon="more-circle" text="发私信" @click="AnswerShow = true"></u-button>
					</view>
				</view>
			</view>
			<u-tabs :list="TabList" @click="TabCheck"></u-tabs>
		</view>

		<scroll-view class="list" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="refresh" @scrolltolower="loadmore">
			<view class="item" v-for="item in list" >
				<view class="business">
					<view class="avatar">
						<image mode="aspectFit" v-if="item.business.avatar_text" :src="item.business.avatar_text"></image>
						<image mode="aspectFit" v-else src="/static/avatar.png"></image>
					</view>
					<view class="author">{{ item.business.nickname }}</view>
				</view>
				
				<view class="info">
					<navigator :url="`/pages/post/info?postid=${item.id}`" class="title">{{ item.title }}</navigator>
					<view class="createtime">发布时间：{{ item.createtime_text }}</view>
					<view class="category">分类：{{ item.cate.name }}</view>
					
					<view class="join">
						<view class="status">{{ item.status_text }}</view>
						<view class="point">￥{{ item.point }}</view>
						<view class="count">{{item.comment_text}}人参与回复</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
		
		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 确认关注弹框组件 -->
		<u-modal :show="ConcernShow" :title="'关注提醒'" :content="'是否确认取消关注此用户'" showCancelButton :closeOnClickOverlay="true"
			@cancel="ConcernShow = false" @close="ConcernShow = false" @confirm="concernok" v-if="business.concern_list.includes(busid.toString())">
		</u-modal>

		<u-modal :show="ConcernShow" :title="'关注提醒'" :content="'是否确认关注此用户'" showCancelButton :closeOnClickOverlay="true"
			@cancel="ConcernShow = false" @close="ConcernShow = false" @confirm="concernok" v-else>
		</u-modal>


		<!-- 私信弹出层 -->
		<u-popup :show="AnswerShow" @close="AnswerShow = false">
            <view class="answer">
				<u-form labelPosition="top" labelWidth="150" :model="comment" :rules="rules" ref="answer">
					<!-- 描述 -->
					<u-form-item
						label="私信内容："
						prop="content"
						ref="content"
					>
						<u--textarea v-model="comment.content" placeholder="请输入私信内容"></u--textarea>
					</u-form-item>
	
					<view class="btn">
						<u-button type="primary" text="提交信息" formType="submit" @click="submit"></u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		onLoad(options){
			var busid = options.busid ? options.busid : 0
			this.busid = busid

			this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

			this.Business()
			this.ListData()
			this.AskData()
			this.AnswerData()
			this.CollectData()
		},
		data()
		{
			return {
				content: `
					<b>这个是正文内容</b>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				comment:{
					content: '',
				},
				rules:{
					content: {
						type: 'string',
						required: true,
						message: '请填写私信内容',
						trigger: ['blur', 'change']
					},
				},
				AnswerShow: false,
				TabList:[
					{id:0, name: '我的提问'},
					{id:1, name: '我的回答'},
					{id:2, name: '我的收藏'}
				],
				ConcernShow: false,
				list:[],
				triggered: false,
				finished: false,
				scrollTop: 0,
				tabid: 0,
				page: 1,
				msg: '',
				business: {},
				person: {},
				busid: 0,
				attention: false,
				ask: [],
				answer: [],
				collect: [],
				show: false,
				
			}
		},
		methods:{
			confirm()
			{
				this.show = false
			},
			concern(){
				this.ConcernShow = true
			},
			//上拉加载
			onReachBottom()
			{
				if(this.finished) return;

				this.page++
				this.ListData()
			},
			onPageScroll(e) 
			{
				this.scrollTop = e.scrollTop;
			},
			async TabCheck(item)
			{
				this.tabid = item.id
				// console.log(this.tabid)

				this.list = []
				this.page = 1
				this.ListData()
			},
			async Business(){
				var data = {}
				if(this.busid){
					data['busid'] = this.busid
				}else{
					data['busid'] = this.business.id
				}

				var result = await uni.$u.http.post('/business/business',data)

				if(result.code == 0){
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				}else{
					// console.log(result.data);

					this.person = result.data

					
				}
			},
			async ListData(){
				var data = {
					tabid: this.tabid,
					page: this.page,
				}
				if(this.busid){
					data['busid'] = this.busid
				}else{
					data['busid'] = this.business.id
				}


				var result = await uni.$u.http.post('/business/data',data)

				//改变下拉的状态
				this.triggered = false


				if(result.code == 0){
					this.finished = true
					// this.msg = result.msg
					// return false
				}else{
					// console.log(result.data);
					this.list = this.list.concat(result.data)
					
				}
			},
			async AskData(){
				var data = {
					page: this.page,
				}
				if(this.busid){
					data['busid'] = this.busid
				}else{
					data['busid'] = this.business.id
				}

				var result = await uni.$u.http.post('/business/ask',data)

				if(result.code == 0){
					this.ask = []
					return false
				}else{
					// console.log(result.data);
					
					this.ask = this.ask.concat(result.data)
					
				}
			},
			async AnswerData(){
				var data = {
					page: this.page,
				}
				if(this.busid){
					data['busid'] = this.busid
				}else{
					data['busid'] = this.business.id
				}
				var result = await uni.$u.http.post('/business/answer',data)

				if(result.code == 0){
					this.answer = []
					return false
				}else{
					// console.log(result.data);
					
					this.answer = this.answer.concat(result.data)
					
				}
			},
			async CollectData(){
				var data = {
					page: this.page,
				}
				if(this.busid){
					data['busid'] = this.busid
				}else{
					data['busid'] = this.business.id
				}

				var result = await uni.$u.http.post('/business/collect',data)

				if(result.code == 0){
					this.collect = []
					return false
				}else{
					// console.log(result.data);
					
					this.collect = this.collect.concat(result.data)
					
				}
			},
			async concernok(){
				var data = {
					'busid': this.business.id,
					'concern': this.busid
				}

				var result = await uni.$u.http.post('/business/concern',data)

				if(result.code == 0){
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				}else{
					this.$refs.notice.show({
						type: 'success',
						message: result.msg
					})
					this.ConcernShow = false

					uni.setStorageSync('business',result.data)
					this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}
					this.Business()
				}
			},
			//刷新事件
			refresh() 
			{
				this.triggered = true;
				this.finished = false;

				this.list = []

				this.ListData()
				// console.log(this.postlist)
			},
			loadmore()
			{
				// console.log('上拉加载')
			},
			submit()
			{
				//判断是否有通过表单验证
				this.$refs.answer.validate()
				.then(async res => {
					this.AnswerShow = false
					this.$refs.notice.show({
						type: 'success',
						message: '通过表单验证'
					})
					// console.log(this.comment)

					if(!this.business || !this.business.id){
						this.$refs.notice.show({
							type: 'error',
							message: '请先登录'
						})

						return false
					}

					var data = {
						busid: this.business.id,
						accept: this.busid,
						content: this.comment.content
					}

					console.log(data)
					var result = await uni.$u.http.post('/business/send',data)

					if(result.code == 0){
						this.$refs.notice.show({
							type: 'error',
							message: result.msg
						})
						return false
					}else{
						this.$refs.notice.show({
							type: 'success',
							message: result.msg
						})
						this.comment.content = ''
					}

				})
				.catch(error => {
					console.log(error)
					this.$refs.notice.show({
						type: 'error',
						message: '效验失败'
					})
				})
			}
		}
	}
</script>


<style>
	.content{
		width:100%;
		overflow-x: hidden;
	}

	.person {
		background-image: url("/static/titlebg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		padding: 30px 30px 10px;
	}

	.person .info{
		display: flex;
		width:100%;
		margin-bottom:15px;
	}

	.person .info .avatar{
		width:4em;
		height:4em;
		overflow: hidden;
		border-radius: 100%;
		margin-right:1em;
		flex-shrink: 0;
	}

	.person .info .avatar image{
		width:100%;
		height:100%;
	}

	.person .info .base{
		color:#fff;
		font-size:1em;
	}

	.person .info .base .nickname{
		margin-bottom:7px;
	}

	.person .info .base .desc{
		font-size:.8em;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 改成你需要的行数 */
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.person .grid{
		margin-bottom:15px;
	}

	.person .btnlist{
		display: flex;
		width:100%;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-wrap: nowrap;
	}

	.person .btnlist .btn{
		margin-right:10px;
	}





	.nav {
		display: flex;
		background-color: #f1f6f9;
		position: relative;
		justify-content: space-around;
		align-items: center;
		align-content: center;
	}

	.nav .nav-item {
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		color: #666;
		font-size: 30rpx;
	}

	.nav .active {
		color: #000;
		font-weight: 600;
	}

	.nav .active-line {
		background-color: #038fff;
		width: 35rpx;
		height: 4rpx;
		position: absolute;
		top: 86rpx;
		transition: left 0.2s;
	}

	.list .item{
		display: flex;
		width:100%;
		padding:10px;
		margin:0 auto;
	}

	.business{
		width:20%;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 10px;
		margin-right:10px;
	}

	.avatar{
		width:100%;
		height:5em;
	}

	.avatar image{
		width:100%;
		height:100%;
	}

	.author{
		text-align: center;
		font-size:.8em;
		color:#999;
		width:100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.info{
		font-size:.9em;
		color:#999;
	}

	.info .title, .info .createtime, .info .category, .info .status, .info .join{
		margin-bottom:2px;
	}

	.info .title{
		font-size:1.1em;
		width:95%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color:#000;
		text-decoration: underline;
		font-weight: bold;
	}

	.info .status{
		background:#fff8e5;
		color:#fa3534;
		padding:1px 2px;
		border:1px solid #fa3534;
		border-radius: 3px;
		margin-right:5px;
	}

	.info .join{
		display: flex;
		align-items: center;
		align-content: center;
		color:#fa3534;
	}

	.count{
		margin-right:10px;
	}

	.info .point{
		width:4em;
		text-align: center;
		background:#fff8e5;
		color:#f19049;
		padding:2px;
		margin-right:10px;
	}
</style>
